<template>
  <a-layout-header class="header" >
    <div class="logo">
      <router-link to="/welcome" style="color: white; font-size: 18px">
        圣殿中心
      </router-link>
    </div>
    <div style="float: right; color: white;">
      您好：{{member.mobile}} &nbsp;&nbsp;
<!--      <router-link to="/login" style="color: white;">-->
<!--        退出登录-->
<!--      </router-link>-->
      <a-button type="primary" @click="logout">退出登录</a-button>
    </div>
  </a-layout-header>
</template>

<script>
import {defineComponent, ref, watch} from 'vue';
import store from "@/store";
import router from '@/router'
import safetyOutlined from "@ant-design/icons-vue/lib/icons/SafetyOutlined";

export default defineComponent({
  name: "the-header-view",
  setup() {

    let member = store.state.member;
    const logout = ()=>{
      console.log(store.state.member.mobile);
      //TODO 没起作用未知
      sessionStorage.removeItem("MEMBER");
      router.push("/login");
    }
    return {
      member,
      logout
    }
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  float: left;
  height: 100px;
  width: 150px;
  color: white;
  font-size: 20px;
}
.header{
  height: 100px;
  background: url("../assets/st_sky1.jpg") center center no-repeat;
  background-size: 100% 100%;
}
</style>
